<template>
	<div>
		<el-card header="管理员登录" class="login-card">
			<el-form @submit.native.prevent="login">
				<el-form-item label="用户名">
					<el-input style="width: 24rem;" v-model="model.username"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input style="width: 24rem;" type="password" v-model="model.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" native-type="submit">登录</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				model:{
					username:'',
					password:''
				}
			}
		},
		methods:{
			async login(){
				if(this.model.username==''){
					this.$message({
						type:'warning',
						message:"请输入用户名！"
					})
				}else if(this.model.password==''){
					this.$message({
						type:'warning',
						message:"请输入密码！"
					})
				}
				else{
					const res = await this.$http.post('login',this.model)
					sessionStorage.token = res.data.token //表示浏览器关闭之后用户需要再次登录
					console.log(res.data.token)
					//localStorage.token = res.data.token 将token存储在本地
					const Cookies = require('js-cookie')
					Cookies.set('user_token',sessionStorage.token,{expires:7})
					
					this.$store.commit('setUser',{name:res.data.username,role:res.data.role,id:res.data.id,editor:res.data.editor})
					this.$router.push(`/admin_user/page/${this.$store.state.user.id}`)
					this.$message({
						type:'success',
						message:"登录成功！"+this.$store.state.user.editor
					})
				}
				
			}
		}
	}
</script>

<style>
	.login-card{
		width:30rem;
		margin:8rem auto;
	}
</style>
